<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Image Crop
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="/Content/css/jcrop/jcrop.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jCrop/jquery.Jcrop.min.js" type="text/javascript"></script>

    <script src="/Scripts/jCrop/jquery.Jcrop.js" type="text/javascript"></script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="div-frame">
        <h2>
            Image</h2>
        <% using (Html.BeginForm("ImageCrop", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
           { %>
        <!-- get the select image details-->
        <input type="hidden" id="x1" name="x1" />
        <input type="hidden" id="y1" name="y1" />
        <input type="hidden" id="x2" name="x2" />
        <input type="hidden" id="y2" name="y2" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <%= Html.Hidden("newFileURL", ViewData["newFileURL"])%>
        <% if (ViewData["newFileDetails"] != null)
           {%>
        <%= Html.Hidden("newFileWidth", (ViewData["newFileDetails"] as ImageHelper).ImageWidth)%>
        <%= Html.Hidden("newFileHight", (ViewData["newFileDetails"] as ImageHelper).ImageHight)%>
        <%} %>
        <div class="left-float">
           <p> Select the area to crop</p>
            <div id="imgContainer">
                <img src='<%=ViewData["newFileURL"] %>' alt="Select the area to crop" id="originalImage" />
            </div>
            <p>
            <input type="submit" value="Crop this image :)" style="width: 130px" onclick="return ValidateSelected();" />
            </p>
        </div>
        <div class="right-float">
            Here is the image preview:
            <br class="clear" />
            <div style="width: 128px; height: 128px; overflow: hidden;">
                <img src='<%=ViewData["newFileURL"] %>' alt="preview" id="preview" />
            </div>
        </div>
        <% } %>
         <br class="clear" />
    </div>
</asp:Content>
